<template>
  <header>
    <div class="nav-wrapper">
      <!-- 商城名字 = 小果汁 -->
      <router-link to="/" class="brand">小果汁</router-link>

      <nav>
        <router-link to="/">首页</router-link>
        <router-link to="/products">产品列表</router-link>
        <router-link to="/about">平台介绍</router-link>
      </nav>
    </div>
  </header>

  <!-- 页面出口 -->
  <main>
    <router-view />
  </main>
</template>

<style scoped>
header {
  height: 64px;
  background: #fff;
  box-shadow: 0 2px 8px #0001;
  position: sticky;
  top: 0;
  z-index: 999;
}
.nav-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 20px;
}
nav {
  margin-left: auto;
  display: flex;
  gap: 32px;
}
nav a {
  font-size: 16px;
  color: #666;
  text-decoration: none;
  transition: color 0.3s;
}
nav a:hover,
nav a.router-link-active {
  color: var(--juice-dark);
}
</style>
